<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">

<div th:replace="~{/fragment/common-fragment :: head(电影列表)}"></div>

<body>
<div class="wrapper">
    <!-- Header section -->
    <div th:replace="~{/fragment/common-fragment :: header}"></div>

    <!-- Search bar -->
    <div class="search-wrapper">
        <div class="container container--add">
            <form id="search-form" class="search">
                <input type="text" name="keyword" class="search__field" placeholder="输入关键词，开始查询"/>
                <select
                        name="sorting_item"
                        id="search-sort"
                        class="search__sort"
                        tabindex="0"
                >
                    <option value="byTitle" selected="selected">电影名</option>
                    <option value="byDirector">导演</option>
                    <option value="byActors">演员</option>
                    <option value="byCountry">国家</option>
                    <option value="byCategory">类型</option>
                </select>
                <button id="searchBtn" class="btn btn-md btn--danger search__button">
                    查找电影
                </button>
            </form>
        </div>
    </div>

    <!-- Main content -->
    <section class="container">
        <div class="col-sm-12">
            <h2 class="page-heading">Movies</h2>

            <!-- 筛选框 -->
            <!--<div class="select-area">
                <form class="select" method="get">
                    <select name="select_item" class="select__sort" tabindex="0">
                        <option value="1" selected="selected">London</option>
                        <option value="2">New York</option>
                        <option value="3">Paris</option>
                        <option value="4">Berlin</option>
                        <option value="5">Moscow</option>
                        <option value="3">Minsk</option>
                        <option value="4">Warsawa</option>
                        <option value="5">Kiev</option>
                    </select>
                </form>

                <form class="select select&#45;&#45;cinema" method="get">
                    <select name="select_item" class="select__sort" tabindex="0">
                        <option value="1" selected="selected">Cineworld</option>
                        <option value="2">Empire</option>
                        <option value="3">Everyman</option>
                        <option value="4">Odeon</option>
                        <option value="5">Picturehouse</option>
                    </select>
                </form>

                <form class="select select&#45;&#45;film-category" method="get">
                    <select name="select_item" class="select__sort" tabindex="0">
                        <option value="2" selected="selected">Children's</option>
                        <option value="3">Comedy</option>
                        <option value="4">Drama</option>
                        <option value="5">Fantasy</option>
                        <option value="6">Horror</option>
                        <option value="7">Thriller</option>
                    </select>
                </form>
            </div>-->

            <div class="tags-area">
                <div class="tags tags--unmarked">
                    <span class="tags__label">分类:</span>
                    <ul>
                        <li class="item-wrap">
                            <a href="#" class="tags__item item-active" data-filter="all"
                            >所有</a
                            >
                        </li>
                        <li class="item-wrap">
                            <a href="#" class="tags__item" data-filter="release"
                            >上映日期</a
                            >
                        </li>
                        <li class="item-wrap">
                            <a href="#" class="tags__item" data-filter="popularity"
                            >评分最高</a
                            >
                        </li>
                        <li class="item-wrap">
                            <a href="#" class="tags__item" data-filter="comments"
                            >评论最多</a
                            >
                        </li>
                        <li class="item-wrap">
                            <a href="#" class="tags__item" data-filter="ending"
                            >即将结束</a
                            >
                        </li>
                    </ul>
                </div>
            </div>

            <!-- MovieService preview item -->
            <div th:each="movie:${movies}" class="movie movie--preview movie--full release">
                <div class="col-sm-3 col-md-2 col-lg-2">
                    <div class="movie__images">
                        <img alt="" th:src="${movie.poster}"/>
                    </div>
                    <!-- 评论数 -->
                    <div class="movie__feature">
                        <a href="#" class="movie__feature-item movie__feature--comment">123</a>
                    </div>
                </div>

                <div class="col-sm-9 col-md-10 col-lg-10 movie__about">
                    <a th:href="'/movie/'+${movie.id}" th:text="${movie.name}" class="movie__title link--huge"
                    >Last Vegas (2013)</a>

                    <p class="movie__time" th:text="${movie.duration}+' min'">105 min</p>

                    <p class="movie__option">
                        <strong>Country: </strong><a th:text="${movie.country}"
                                                     th:href="'/byCountry/'+${movie.country}">USA</a>
                    </p>
                    <p class="movie__option">
                        <strong>Category: </strong><a th:each="cate:${movie.categories}" th:text="${cate.name}+' '"
                                                      th:href="'/byCategory/'+${cate.name}">Comady</a>
                    </p>
                    <p class="movie__option">
                        <strong>Release date: </strong><span
                            th:text="${#dates.format(movie.releaseDate,'yyyy-MM-dd')}">November 1, 2013</span>
                    </p>
                    <p class="movie__option">
                        <strong>Director: </strong><a th:href="'/byDirector/'+${movie.directors}"
                                                      th:text="${movie.directors}">Jon Turteltaub</a>
                    </p>
                    <p class="movie__option">
                        <strong>Actors: </strong><a th:href="'/byActors/'+${movie.actors}" th:text="${movie.actors}">Robert
                        De Niro</a>
                    </p>
                    <p class="movie__option">
                        <strong>Age restriction: </strong><a href="#">13</a>
                    </p>

                    <div class="movie__btns">
                        <a th:href="@{/book1(movieId=${movie.id})}" class="btn btn-md btn--warning">预订此电影</a>
                        <a th:attr="data-movieId=${movie.id}" class="watchlist addWatchlist">添加到播放列表</a>
                    </div>

                    <div class="preview-footer">
                        <div class="movie__rate">
                            <div class="score"></div>
                            <span th:text="${movie.count}+ ' 个评分'" class="movie__rate-number">170 个评分</span>
                            <span th:text="${movie.score}" class="movie__rating">5.0</span>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
            </div>
            <!-- end movie preview item -->

        </div>
    </section>

    <div class="clearfix"></div>

    <div th:insert="~{/fragment/common-fragment :: footer}"></div>
</div>

<!-- open/close -->
<div th:replace="~{/fragment/common-fragment :: pop}"></div>
<!-- JavaScript-->
<div th:replace="~{/fragment/common-fragment :: script}"></div>

<script type="text/javascript">
    $(document).ready(function () {
        init_MovieList();
    });
</script>
</body>
</html>
